import React from 'react';
import _ from 'lodash';
import { Actions } from "react-native-router-flux";
import { observer } from 'mobx-react';
import Form, { validate } from '../../../components/Former';
import Button from '../../../components/Button';
import Spin from '../../../components/spin';
import { idCardRule } from '../../../utils/rules';
import user from '../../../common/models/user';

@observer
class MyForm extends React.Component {
  _validate = () => {
    validate((err, val) => {
      if (!err) {
        user.update.call(user, val, () => {
          Alert.alert('操作成功', '已经提交加入机构申请, 请等候审核...', [
            { text: '知道了', onPress: Actions.pop }
          ]);
        });
      }
    });
  };

  fields = [
    {
      title: '第二步：提交加入机构申请',
      type: 'Title'
    },
    {
      label: '机构编码',
      placeholder: '请输入机构编码',
      type: 'TextInput',
      key: 'insuranceOrgId',
      initialValue: this.props.institutionId,
      disabled: true,
    },
    {
      label: '职级',
      placeholder: '请选择职位级别',
      type: 'Selecter',
      key: 'insuranceOrgPostId',
      rules: [{ require: true }],
      options: this.props.user.posts
    },
    {
      label: '姓名',
      placeholder: '请输入本人真实姓名',
      type: 'TextInput',
      key: 'name',
      initialValue: this.props.user.userInfo.name,
      rules: [{ require: true }]
    },
    {
      label: '工号',
      placeholder: '请输入本人工号',
      type: 'TextInput',
      key: 'workerNo',
      rules: [{ require: true }]
    },
    {
      label: '身份证号',
      placeholder: '请输入本人身份证号',
      type: 'TextInput',
      key: 'idCardNo',
      rules: [
        {
          validation: (value, cb) => {
            if (value && !idCardRule(value)) {
              cb('身份证号格式不正确');
            } else {
              cb();
            }
          }
        }
      ]
    },
  ]
  render() {
    if (_.isEmpty(this.props.user.posts)) {
      return null;
    }
    return (
      <Spin visible={this.props.user.pending}>
        <Form
          fields={this.fields}
          bottom={
            <Button
              onPress={this._validate}
              type="primary"
              title="提交机构编码"
            />
          }
        />
      </Spin>
    );
  }
}

export default MyForm;
